<!--{template common/header}-->
 <link rel="stylesheet" href="/source\plugin\boan_payment\lib\vue\element.css">
  <style>
 	.curblock{
		border-color:#E6A23C;
	}
	.user_avatar {
		text-align: center;
		margin-top:8px;
		
	}
	.user_avatar img {
		border-radius: 45px;
		border: 1px solid #FFF;
		box-shadow: 1px 2px 2px rgb(0 0 0 / 30%);
		width: 50px;
		height: 50px;
	}
	.el-divider--horizontal{
		margin:10px 0;
	}
    .el-descriptions-item{
		padding:10px;
	}
 </style>
 <script src="/source\plugin\boan_payment\lib\vue\vue.min.js"></script>
 <script src="/source\plugin\boan_payment\lib\vue\element.js"></script>

<body>
   <!--{if !$_GET['dopay']}-->
	<div id="app">
    	<form method="post" id="frm_order" action="home.php?mod=spacecp&ac=plugin&id=boan_payment:user_order">
	        <input type="hidden" name="status" :value="status" />
        	<el-row  style="margin-top:10px;">
				<el-col :offset="1" :span="4">
               		<el-link style="font-size:24px; padding:5px;"  icon="el-icon-arrow-left" @click="window.location.href = '{$_G['siteurl']}'"></el-link>
                </el-col>
                <el-col :span="14" style="text-align:center">
               		<span style="font-size:20px;">{lang boan_payment:order_list}</span>
                </el-col>
                <el-col :span="4">
                	<div style="width:40px;height:40px; text-align:center;border-radius:45px;box-shadow:rgba(0, 0, 0, 0.3) 1px 2px 2px 0px;display:block;overflow:hidden;position: relative;left: 50%;transform: translateX(-50%); margin-top:-6px;" @click="window.location.href = 'home.php?mod=space&uid=1&do=profile&mycenter=1&mobile=2'">
                    	$avatar
                    </div>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row  style="margin-top:10px;">
               <el-col :offset="1" :span="22">
                  <el-tabs v-model="activeName" @tab-click="tabClick">
                    <el-tab-pane label="{lang boan_payment:order_all}" name="first">
                      <!--{if $status == 0}-->
                        <el-card v-for="order in orders" class="box-card">
                          <el-row>
                          	 <el-col :span="20">
                             	 <div>
                                     <span style="color:#606266; font-size:14px;">{lang boan_payment:order_id}{{order.order_id}}</span>
                                 </div>
                             </el-col>
                              <el-col :span="4">
                             	 <div v-if="order.status==1" style="text-align: right;font-size: 14px;color:#E6A23C;margin-top: -3px;">
                                     {lang boan_payment:payed1}
                                 </div>
                                 <div v-else style="margin-top: -5px;">
                                     <el-button type="warning" size="mini" round  @click="gopay(order.order_id)">{lang boan_payment:pay}</el-button>
                                 </div>
                             </el-col>
                          </el-row>
                         
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="4">
                                	 <i class="el-icon-money" style="font-size:60px;color:#409EFF;"></i>
                                </el-col>
                                <el-col :offset="2" :span="18">
                                	<div style="font-size: 14px;color: #606266;">{{order.subject}}</div>
                                    <div style="color: #909399;">{{order.body}}</div>
                                </el-col>
                           </el-row>   
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="14">
                                	   <div style="color: #909399; margin-bottom:2px;">{lang boan_payment:title5}{{order.create_time}}</div>
                                       <div v-if="order.pay_time !='-'" style="color: #909399;">{lang boan_payment:title6}{{order.pay_time}}</div>
                                       <div v-else style="color:#F56C6C">{lang boan_payment:info1}{{expireTime(order.expire_time)}}{lang boan_payment:info2}</div>
                                </el-col>
                                <el-col :offset="2" :span="8">
                                	<div style="text-align: right;font-size: 18px; color: #F56C6C;margin-top: 8px;">
                                    	{$RMB}{{order.amount}}
                                    </div>
                                    
                                </el-col>
                           </el-row> 
                        </el-card>
                      <!--{/if}-->
                    </el-tab-pane>
                    <el-tab-pane label="{lang boan_payment:order_payed}" name="second">
                	     <!--{if $status == 2}-->
                        <el-card v-for="order in orders" class="box-card">
                          <el-row>
                          	 <el-col :span="20">
                             	 <div>
                                     <span style="color:#606266;">{lang boan_payment:order_id}{{order.order_id}}</span>
                                 </div>
                             </el-col>
                              <el-col :span="4">
                             	 <div v-if="order.status==1" style="text-align: right;font-size: 14px;color:#E6A23C;margin-top: -3px;">
                                     {lang boan_payment:payed1}
                                 </div>
                                 <div v-else style="margin-top: -5px;">
                                     <el-button type="warning" size="mini" round >{lang boan_payment:pay}</el-button>
                                 </div>
                             </el-col>
                          </el-row>
                         
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="4">
                                	 <i class="el-icon-money" style="font-size:60px;color:#409EFF;"></i>
                                </el-col>
                                <el-col :offset="2" :span="18">
                                	<div style="font-size: 14px;color: #606266;">{{order.subject}}</div>
                                    <div style="color: #909399;">{{order.body}}</div>
                                </el-col>
                           </el-row>   
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="14">
                                	   <div style="color: #909399; margin-bottom:2px;">{lang boan_payment:title5}{{order.create_time}}</div>
                                       <div v-if="order.pay_time !='-'" style="color: #909399;">{lang boan_payment:title6}{{order.pay_time}}</div>
                                       <div v-else style="color:#F56C6C">{lang boan_payment:info1}{{expireTime(order.expire_time)}}{lang boan_payment:info2}</div>
                                </el-col>
                                <el-col :offset="2" :span="8">
                                	<div style="text-align: right;font-size: 18px; color: #F56C6C;margin-top: 8px;">
                                    	{$RMB}{{order.amount}}
                                    </div>
                                    
                                </el-col>
                           </el-row> 
                        </el-card>
                      <!--{/if}-->
                    </el-tab-pane>
                    <el-tab-pane label="{lang boan_payment:order_nopay}" name="third">
                  	   <!--{if $status == 1}-->
                        <el-card v-for="order in orders" class="box-card">
                          <el-row>
                          	 <el-col :span="20">
                             	 <div>
                                     <span style="color:#606266;">{lang boan_payment:order_id}{{order.order_id}}</span>
                                 </div>
                             </el-col>
                              <el-col :span="4">
                             	 <div v-if="order.status==1" style="text-align: right;font-size: 14px;color:#E6A23C;margin-top: -3px;">
                                     {lang boan_payment:payed1}
                                 </div>
                                 <div v-else style="margin-top: -5px;">
                                     <el-button type="warning" size="mini" round @click="gopay(order.order_id)">{lang boan_payment:pay}</el-button>
                                 </div>
                             </el-col>
                          </el-row>
                         
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="4">
                                	 <i class="el-icon-money" style="font-size:60px;color:#409EFF;"></i>
                                </el-col>
                                <el-col :offset="2" :span="18">
                                	<div style="font-size: 14px;color: #606266;">{{order.subject}}</div>
                                    <div style="color: #909399;">{{order.body}}</div>
                                </el-col>
                           </el-row>   
                           <el-divider></el-divider>
                           <el-row>
                           	    <el-col :span="14">
                                	   <div style="color: #909399; margin-bottom:2px;">{lang boan_payment:title5}{{order.create_time}}</div>
                                       <div v-if="order.pay_time !='-'" style="color: #909399;">{lang boan_payment:title6}{{order.pay_time}}</div>
                                       <div v-else style="color:#F56C6C">{lang boan_payment:info1}{{expireTime(order.expire_time)}}{lang boan_payment:info2}</div>
                                </el-col>
                                <el-col :offset="2" :span="8">
                                	<div style="text-align: right;font-size: 18px; color: #F56C6C;margin-top: 8px;">
                                    	{$RMB}{{order.amount}}
                                    </div>
                                    
                                </el-col>
                           </el-row> 
                        </el-card>
                      <!--{/if}-->
                    </el-tab-pane> 
                  </el-tabs>
               </el-col>
            </el-row>
            
        </form>
    </div>
    <div class="pgs cl mtm">
            $multipage
    </div>
    <script>
	   var orders ={eval echo  boan_paymentBase::iconv(boan_paymentBase::json_encode($orders),'utf-8',CHARSET);};
	   var status = {eval echo $status};
	   var curTab = '';
	   var Main = {
		data () {
		  return {
			activeName:'',
			status:0,
			orders:null,
			fullscreenLoading: true,
		  };
		},
		computed:{
			
		},
		methods:{
			tabClick(val){
				if(val.name == curTab){
						return ;
				}
			
				if(val.name == 'first'){
					this.status = 0;
				}else if(val.name == 'second'){
					this.status = 2;
				}else{
					this.status = 1;
				}
				setTimeout('$("#frm_order").submit();',200);
				const loading = this.{$VUE}loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				
			},
			expireTime(time){
				var cur = parseInt(Date.now()/1000);
				var sec = time - cur;
				var h = parseInt(sec/3600);
				var m = parseInt((sec % 3600)/60);
				var s = '';
				if(h){
					s = h + '{lang boan_payment:hour}';
				}else{
					s = m + '{lang boan_payment:min}';
				}
				return s;
			},			
			gopay(order_id){
				window.location = 'home.php?mod=spacecp&ac=plugin&id=boan_payment:user_order&dopay=yes&order_id=' + order_id;
			}
			
		},
		mounted(){
			this.status = status;
			switch(status){
				case '0':
				  this.activeName = 'first';
				  break;
				case '1':
				  this.activeName = 'third';
				  break;
				case '2':
				  this.activeName = 'second';
			}
			curTab = this.activeName;
			this.orders = orders;
		}
	  }
	var Ctor = Vue.extend(Main);
	new Ctor().{$VUE}mount('#app');
	</script>
    <!--{else}-->
        <div id="app">
            <el-row  style="margin-top:10px;">
                <el-col :offset="1" :span="4">
                    <el-link style="font-size:24px; padding:5px;"  icon="el-icon-arrow-left" @click="window.history.go(-1)"></el-link>
                </el-col>
                <el-col :span="14" style="text-align:center">
                    <span style="font-size:20px;">{lang boan_payment:order_list}</span>
                </el-col>
                <el-col :span="4">
                    <div style="width:40px;height:40px; text-align:center;border-radius:45px;box-shadow:rgba(0, 0, 0, 0.3) 1px 2px 2px 0px;display:block;overflow:hidden;position: relative;left: 50%;transform: translateX(-50%); margin-top:-4px;" @click="window.location.href = 'home.php?mod=space&uid=1&do=profile&mycenter=1&mobile=2'">
                        $avatar
                    </div>
                </el-col>
            </el-row>
            <el-row  style="margin-top:10px;">
                  <el-col :offset="1" :span="22">
                        <el-descriptions :colon="0" :column="1" title="{lang boan_payment:orderinfo}">
                            <el-descriptions-item label="{lang boan_payment:title1}" >
                               <div style="width:100%; text-align:right; color:#909399;">{{order.order_id}}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="{lang boan_payment:title5}">
                               <div style="width:100%; text-align:right; color:#909399;"> {{order.create_time}}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="{lang boan_payment:title7}">
                               <div style="width:100%; text-align:right; color:#909399;">{{order.expire_time}}</div>
                            </el-descriptions-item>
                            <el-descriptions-item label="{lang boan_payment:ordertitle}">
                              <div style="width:100%; text-align:right; color:#909399;">{{order.subject}}</div>
                            </el-descriptions-item>
                           
                            <el-descriptions-item label="{lang boan_payment:title2}">
                              <div style="width:100%; text-align:right; color:#909399;">{{order.body}}</div>
                            </el-descriptions-item>
                            
                            <el-descriptions-item label="{lang boan_payment:amount}">
                                <div style="width:100%; text-align:right;">
                                	<span style="color: #F56C6C;font-size: 14px;margin-right: 9px;font-weight: bold;">{{order.amount}}</span>{lang boan_payment:pay3}
                                </div>
                            </el-descriptions-item>
                      </el-descriptions>
                  </el-col>
            </el-row>
            <el-row style="margin-top:20px">
                <el-col :span="6" :offset="1">
                    <span style="color:#606266;line-height:30px;">{lang boan_payment:pay_method}</span>
                </el-col>
                <el-col :span="17">
                    <div>
                        <el-radio-group v-model="paymethod"  size="small" >
                          <!--{if $alipay_url}-->
                              <el-radio :label="1" border>{lang boan_payment:alipay}</el-radio>
                          <!--{/if}-->
                          <!--{if $wxpay_url}-->
                              <el-radio :label="2" border>{lang boan_payment:wxpay}</el-radio>
                          <!--{/if}-->
                        </el-radio-group>
                    </div>
                </el-col>
           </el-row>
        <el-row style="margin-top:20px">
            <el-col :span="22" :offset="1">
                <el-button size="small" type="primary" style="width:98%" @click="gopay()">{lang boan_payment:gopay}</el-button>
            </el-col>
        </el-row>
        
        <!--{if $vars['alipay_m_pay']}-->
            <el-dialog title="{lang boan_payment:paytitle}" :visible.sync="dialogVisible" width="80%">
              <span>{lang boan_payment:payqrcode}</span>
 			  <div style="margin:10px 0px; text-align:center;">
              	<img src="{$alipay_url}"/>
              </div>           
              <span slot="footer" class="dialog-footer">
               </span>
            </el-dialog>
        <!--{/if}-->
        
        </div>
	   
        
   <script>
   	var order = {eval echo  boan_paymentBase::iconv(boan_paymentBase::json_encode($order),'utf-8',CHARSET);};
	var alipay = {eval echo intval($vars['alipay_ok'])};
	var wxpay = {eval echo intval($vars['wxpay_ok'])};
	var alpay_m_pay = {$vars['alipay_m_pay']};
	
	   var Main = {
		data () {
		  return {
			order:order,
			paymethod:{$paymethod},
			dialogVisible:false,
		  };
		},
		computed:{
			
		},
		methods:{
			gopay(){
				if(this.paymethod ==1 ){
					if(alpay_m_pay){
						this.dialogVisible = true;
					}else{
						window.location.href='{$alipay_url}';
					}
					
				}else{
					window.location.href='{$wxpay_url}';
				}
			}
			
		},
		mounted(){
			
		}
	  }
	var Ctor = Vue.extend(Main);
	new Ctor().{$VUE}mount('#app');
	</script>
    <!--{/if}-->
</body>
<!--{template common/footer}-->


